<template>
    <div>
        <NavTopBar title="地址管理" />
        <van-address-list
            v-model="chosenAddressId"
            :list="list"
            default-tag-text="默认"
            @add="onAdd"
            @edit="onEdit"
        />
    </div>
</template>

<script>
import NavTopBar from "@/components/NavTopbar.vue";
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getAddressList } from "@/apis/address";
export default defineComponent({
    components: { NavTopBar },
    setup() {
        const router = useRouter();
        const route = useRoute();
        const state = reactive({
            list: [],
            chosenAddressId: "1",
            disabledList: [],
            from: route.query.from,
        });
        const onAdd = () => {
            router.push({
                path: "/address-add",
                query: { type: "add", from: state.from },
            });
        };

        const onEdit = (item) => {
            router.push({
                path: "address-edit",
                query: { type: "edit", addressId: item.id, from: state.from },
            });
        };

        onMounted(async () => {
            const { data } = await getAddressList({
                pageNumber: 1,
                pageSize: 1000,
            });

            state.list = data.map((item) => {
                return {
                    id: item.addressId,
                    name: item.userName,
                    tel: item.userPhone,
                    address: `${item.provinceName} ${item.cityName} ${item.regionName} ${item.detailAddress}`,
                    isDefault: !!item.defaultFlag,
                };
            });
        });

        // const select = (item) => {
        //     router.push({
        //         path: "create-order",
        //         query: { addressId: item.id, from: state.from },
        //     });
        // };
        return { ...toRefs(state), onEdit, onAdd };
    },
});
</script>

<style lang="scss">
.van-address-list {
    .van-button {
        background: $primary;
        border-color: $primary;
    }
}
</style>
